<template>
	<view class="content">
		<!-- 主容器 start -->
		<view class="top-user-info-box">
			<!-- top 用户信息模块 -->
			<view class="top-plate-box">
				<view class="user-head-box">
					<image :src="userInfo.avatar||'../../static/member_icon/icon14.png'" mode=""></image>
				</view>
				<view class="user-info-box" v-if="isLogins">
					<view style="display: flex;align-items: center;">
						<view class="top-txt-box">
							<view>{{userInfo.nickname}}</view>
							<view class="flex-c-c" v-if="userInfo.grade=='青铜'" style="color: #009594;">
								<image src="../../static/member_icon/icon17.png" mode="widthFix"></image>
								<text>青铜会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='白银'" style="color: #b6bec9;">
								<image src="../../static/member_icon/icon18.png" mode="widthFix"></image>
								<text>白银会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='黄金'" style="color: #D8AC40;">
								<image src="../../static/member_icon/icon1.png" mode="widthFix"></image>
								<text>黄金会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='白金'" style="color: #7663f7;">
								<image src="../../static/member_icon/icon16.png" mode="widthFix"></image>
								<text>白金会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='钻石'" style="color: #23a0e1;">
								<image src="../../static/member_icon/icon15.png" mode="widthFix"></image>
								<text>钻石会员</text>
							</view>
						</view>
						<image @click="toMember" style="width: 34rpx;margin: 0 0 0 20rpx;"
							src="../../static/icon_question.png" mode="widthFix"></image>
					</view>
					<view class="center-txt-box">
						<view class="">TEL:{{userInfo.mobile}}</view>
						<view class="flex-c-c" @click="goMyCode">
							<!-- <image src="../../static/member_icon/icon2.png" mode="widthFix"></image> -->
							<image src="../../static/member_icon/icon3.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="bottom-txt-box">
						<text>经验值：{{userInfo.exp+'/'+userInfo.target_exp}}</text>
						<view class="jdt-box">
							<u-line-progress active-color="#000" :show-percent="false" height="8"
								:percent="getPercent"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="login-box" v-else @click="goLogin">请登录</view>
			</view>
			<view class="bottom-plate-box">
				<view class="integral-box">
					<view>
						{{userInfo.integral||0}}<text>积分</text>
					</view>
					<view class="flex-c-c" @click="goDetails">
						<text>查看明细</text>
						<image src="../../static/member_icon/icon5.png" mode="heightFix"></image>
					</view>
				</view>
				<image src="../../static/member_icon/icon4.png" mode=""></image>
			</view>
		</view>
		<view class="order-plate-box">
			<!-- 订单信息模块 -->
			<!-- <view class="product-order-box" @click="goOrderList(1)">
				<text>产品订单</text>
				<view class="see-order-box flex-c-c">
					<text>查看订单</text>
					<image src="../../static/member_icon/icon5.png" mode="heightFix"></image>
				</view>
				<image class="img" src="../../static/member_icon/icon13.png" mode="heightFix"></image>
			</view> -->
			<view class="product-order-box" @click="goOrderList(2)">
				<text>积分订单</text>
				<view class="see-order-box flex-c-c">
					<text>查看订单</text>
					<image src="../../static/member_icon/icon5.png" mode="heightFix"></image>
				</view>
				<image class="img" src="../../static/member_icon/icon13.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="sele-tarbar-box">
			<view class="tarbar-item-box" v-for="(item,index) in tarbarList" @click="goUrl(item.path)" :key="index">
				<view class="icon-txt-box flex-c-c">
					<image :src="item.url" mode="widthFix"></image>
					<text>{{item.value}}</text>
					<button class="_b" v-if="index==1" hover-class="none" mini :plain="true"
						open-type="contact"></button>
				</view>
				<view class="right-icon-box flex-c-c">
					<image src="../../static/cart_icon/icon1.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogins: false, //是否登录
				userInfo: {}, //用户信息
				tarbarList: [{
						url: '../../static/member_icon/icon7.png',
						value: '球杆认证记录',
						path: '/pageMember/tarbar/recordList'
					},
					// {url:'../../static/member_icon/icon7.png',value:'球杆认证',path:'/pageMember/tarbar/clubAttestation'},
					{
						url: '../../static/member_icon/icon8.png',
						value: '我的地址',
						path: '/pageMember/tarbar/myAddress'
					},
					// {url:'../../static/member_icon/icon9.png',value:'助力团',path:'/pageMember/tarbar/BoosterGroup'},
					{
						url: '../../static/member_icon/icon10.png',
						value: '在线客服',
						path: ''
					},
					{
						url: '../../static/member_icon/icon11.png',
						value: '我的活动',
						path: '/pageMember/tarbar/myActivity'
					},
				]
			}
		},
		onReady() {

		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo();
			const isLogin = uni.getStorageSync('isLogin')
			this.userInfo = isLogin ? uni.getStorageSync('userInfo') : {};
			this.isLogins = isLogin;
		},
		computed: {
			// 计算经验百分比
			getPercent: function() {
				const {
					exp,
					target_exp
				} = this.userInfo
				const percent = (exp / target_exp * 100).toFixed(2)
				return percent
			},
		},
		methods: {
			toMember() {
				uni.navigateTo({
					url: '/pageMember/vipInstructition'
				})
			},
			getUserInfo() { //获取用户信息
				if (uni.getStorageSync('isLogin')) {
					this.$u.api.userInfosApi({}).then(res => {
						if (res.code == 1) {
							// console.log('我的信息：',res.data);
							uni.setStorageSync('userInfo', res.data);
							this.userInfo = uni.getStorageSync('userInfo');
							this.isLogins = true;
						}
					});
				}
			},
			goUrl(path) { //跳转
				if (path == '') {
					return
				} else if (this.$isLogin()) {
					this.$gourl(path);
				}
			},
			goLogin() { //跳转登录
				this.$gourl('/pageMember/login/login');
			},
			goMyCode() { //我的名片
				// if (!this.$isLogin()) return
				// const { target_grade, current_grade, target_grade_name } = this.userInfo
				// if (current_grade < target_grade) {
				// 	this.$showToast(`达到${target_grade_name}等级可以绑定亲友`)
				// 	return
				// }
				this.$gourl('/pageMember/setting/setting')
			},
			goDetails() { //查看明细
				this.$isLogin() ? this.$gourl('/pageMember/tarbar/pointsDetails') : "";
			},
			goOrderList(status) { //跳转订单列表
				this.$isLogin() ? this.$gourl(
					`/pageMember/orderList/${status == 1? `orderList?status=${status}` : 'hallOrderList'}`) : "";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		box-sizing: border-box;

		.top-user-info-box {
			padding: 40rpx 20rpx;
			padding-bottom: 0;
			background: #F6F7FC;

			.top-plate-box {
				display: flex;
				padding-bottom: 40rpx;

				.user-head-box {
					flex: 0.18;
					line-height: 0;

					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50rpx;
					}
				}

				.user-info-box {
					flex: 0.82;
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;

					.top-txt-box {
						padding-bottom: 10rpx;
						display: flex;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 5rpx;
						}

						view:last-child {
							padding-left: 20rpx;
							font-size: 24rpx;
						}
					}

					.center-txt-box {
						display: flex;
						padding-bottom: 10rpx;

						view:first-child {
							flex: 0.8;
							font-size: 26rpx;
							font-weight: 400;
							color: #999999;
						}

						view:last-child {
							flex: 0.2;
							justify-content: flex-end;
							line-height: 0;

							image {
								width: 28rpx;
								height: 28rpx;
								margin-left: 30rpx;
							}
						}
					}

					.bottom-txt-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;

						.jdt-box {
							width: 60%;
						}
					}
				}

				.login-box {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
					padding: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.bottom-plate-box {
				position: relative;
				line-height: 0;

				.integral-box {
					position: absolute;
					z-index: 100;
					padding: 20rpx;
					display: flex;
					width: 100%;

					view:first-child {
						flex: 0.7;
						font-size: 42rpx;
						font-weight: bold;
						color: #FFFFFF;

						text {
							margin-left: 10rpx;
							font-size: 26rpx;
							font-weight: 400;
						}
					}

					view:last-child {
						flex: 0.3;
						justify-content: flex-end;
						font-size: 24rpx;
						font-weight: 400;
						color: #ADADAD;
						line-height: 0;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-left: 20rpx;
							vertical-align: middle;
						}
					}

					line-height: normal;
				}

				image {
					width: 100%;
					height: 100rpx;
				}
			}
		}

		.order-plate-box {
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(0deg, #FFFFFF 0%, #F6F6F6 100%);

			.product-order-box {
				position: relative;
				// width: 330rpx;
				width: 100%;
				padding: 30rpx 30rpx;
				box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;

				.see-order-box {
					padding-top: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					justify-content: flex-start;
					color: #999999;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}

				.img {
					position: absolute;
					bottom: 0;
					right: 20rpx;
					width: 95rpx;
					height: 99rpx;
				}
			}
		}

		.sele-tarbar-box {
			.tarbar-item-box {
				position: relative;
				display: flex;
				line-height: 0;
				padding: 40rpx 20rpx;

				.icon-txt-box {
					flex: 0.9;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					justify-content: flex-start;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					._b {
						position: absolute;
						left: 20rpx;
						right: 0rpx;
						z-index: 100;
						width: 95%;
						height: 80rpx;
						opacity: 0;
					}
				}

				.right-icon-box {
					flex: 0.1;
					justify-content: flex-end;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>